<template>
  <div
    id="svg-bg"
    v-touch:longtap="change"
    class="h-screen flex items-center justify-center"
    :class="{
      [bg]: 1,
    }"
  ></div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
import { SVG } from '@svgdotjs/svg.js';
import { onMounted, ref } from 'vue';
import { LAN, ONG, paint, write, breath } from '@/utils/svgs';

const counter = useCounterStore();

let draw = null;
let bg = ref( 'bg-gray-500')
let mode = ref(0)

const getDraw = (width, heigth) => {
  return SVG().addTo('#svg-bg').size(width, heigth);
}

onMounted(() => {
  draw = getDraw(window.innerWidth, window.innerHeight)
  showOneLetter(LAN);
});

const showOneLetter = (svg) => {
  bg.value = 'bg-gray-900'
  draw.clear()
  paint(draw, svg);
}

const showBreathLetter = (svg) => {
  bg.value = 'bg-gray-900'
  draw.clear()
  breath(draw, svg);
}

const showWriteLetter = (svg) => {
  bg.value = 'bg-white'
  draw.clear()
  write(draw, svg, {
    cols: 3,
    rows: 3,
  });
}

const change = () => {
  console.log(123);
  mode.value += 1
  let mod = mode.value % 3
  if(mod == 0) {
    showOneLetter(LAN);
  } else if(mod == 1) {
    showBreathLetter(LAN);
  } else if(mod == 2) {
    showWriteLetter(LAN);
  }
}
</script>

<style scoped>
</style>
